<template>
  <el-dialog
    v-model="dialogFormVisible"
    :close-on-click-modal="false"
    :title="title"
    width="60%"
    @close="close"
  >
    <el-row :gutter="20">
      <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
        <vab-card v-loading="listLoading" class="left-height">
          <div class="card-title">群列表:</div>
          <div
            v-for="(item, index) in list"
            :key="item.chat_id"
            :class="
              clickIndex == index ? 'div-card select' : 'div-card no-select'
            "
            @click="vabCardFun(item, index)"
          >
            <div>{{ item.chat.name }}</div>
            <div
              class="chat-status"
              :style="
                item.status == 0
                  ? 'color:#67c23a'
                  : item.status == 1
                  ? 'color:#f89898'
                  : 'color:#e6a23c'
              "
            >
              {{ statusFilter(item.status) }}
            </div>
          </div>
          <el-row v-if="list.length == 0" justify="center">
            <el-empty description="暂无内容" image-size="100" />
          </el-row>
          <div v-if="has_more == 1" class="load-more">
            <el-button
              :loading="listLoading"
              style="font-size: 16px; font-weight: bold"
              text
              type="primary"
              @click="loadMore"
            >
              点击加载更多
            </el-button>
          </div>
        </vab-card>
      </el-col>
      <el-col :lg="16" :md="12" :sm="24" :xl="16" :xs="24">
        <vab-card v-if="list[clickIndex]">
          <div class="card-title">群内成员:</div>
          <el-row :gutter="20">
            <el-col
              v-for="(item, index) in list[clickIndex].chat.member_list"
              :key="index"
              :lg="8"
              :md="12"
              :sm="8"
              :xl="6"
              :xs="12"
            >
              <vab-card class="vab-card" shadow="hover">
                <div>{{ item.group_nickname }}</div>
                <div class="">{{ item.name }}</div>
                <div
                  class="chat-status"
                  :style="item.type == 1 ? 'color:#67c23a' : 'color:#e6a23c'"
                >
                  {{ item.type == 1 ? '企业' : '外部' }}
                </div>
              </vab-card>
            </el-col>
          </el-row>
        </vab-card>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
  import { getChatList } from '@/api/enterpriseWeChat/customer'
  export default defineComponent({
    name: 'TableEdit',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')
      const state = reactive({
        formRef: null,
        treeRef: null,
        form: {
          corp_id: null,
          next_cursor: '',
          user_id: '',
          limit: '',
        },
        list: [],
        statusList: [
          { id: 0, name: '正常' },
          { id: 1, name: '离职' },
          { id: 2, name: '继承中' },
          { id: 3, name: '继承完成' },
        ],
        has_more: 0,
        listLoading: false,
        rules: {
          name: [
            { required: true, trigger: 'blur', message: '请输入分类名称' },
          ],
        },
        title: '',
        clickIndex: 0,
        dialogFormVisible: false,
      })

      const showEdit = async (row) => {
        console.log(row)
        state.title = '客户群'
        state.listLoading = true
        state.dialogFormVisible = true
        state.form.corp_id = row.corp_id
        state.form.next_cursor = row.next_cursor
        state.form.user_id = row.user_id
        await fetchData()
      }
      const statusFilter = (status) => {
        return state.statusList.find((item) => item.id == status).name
      }
      const vabCardFun = (item, index) => {
        state.clickIndex = index
        console.log(item.click)
      }
      const fetchData = async () => {
        const { data } = await getChatList(state.form)
        if (data.chat_list) {
          state.list = [...state.list, ...data.chat_list]
        }
        console.log(state.list)
        if (data.has_more == 1) {
          state.queryForm.next_cursor = data.next_cursor
        }
        state.has_more = data.has_more
        state.listLoading = false
      }
      const loadMore = () => {
        fetchData()
      }
      const close = () => {
        // state['formRef'].resetFields()
        state.form = {}
        state.list = []
        state.dialogFormVisible = false
      }
      const save = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            const { message } = await doEdit(state.form)
            $baseMessage(message, 'success', 'vab-hey-message-success')
            emit('fetch-data')
            close()
          }
        })
      }
      return {
        ...toRefs(state),
        showEdit,
        close,
        save,
        statusFilter,
        vabCardFun,
        loadMore,
        fetchData,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .load-more {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
  .card-title {
    font-size: 16px;
    color: var(--el-color-primary);
    margin-bottom: 10px;
  }
  .left-height {
    height: 500px;
    overflow-y: auto;
  }
  .div-card {
    position: relative;
    padding: 20px 10px;
    border: 1px solid var(--el-card-border-color);
    border-radius: 2px;
    margin-bottom: 10px;
  }
  .select {
    background-color: #eae7e6;
  }
  .no-select {
    background-color: #fff;
  }
  .vab-card {
    position: relative;
  }
  .chat-status {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 10px;
  }
</style>
